import {
    BQGIS_initSynchronization
} from './BQGIS-camera/BQGIS-Synchronization'

/**
 * 双屏，四屏切换(初始时只创建一个屏幕，当前切换屏幕时，不显示的屏幕将会删除，显示时重新创建)
 * @param    viewer          Mars3d实例对象
 * @param    styleOption     样式配置(可选)
 * 
 * @function setMultiSence      设置屏幕类型
 * @function getViewData        查询对应的viewer数据
 * 
 * 
 */
export function BQGIS_multiSence({
    viewer,
    styleOption = {},
}) {
    this.mode = null
    this.viewer = viewer
    this.styleOption = Object.assign({
        leftRight: {
            // 左右屏时的样式
            parent: {
                display: "flex",
                flexWrap: "wrap",
                justifyContent: "space-around"
            },
            firstDom: {
                width: "49.9%",
                height: "100%"
            },
            secondDom: {
                width: "49.9%",
                height: "100%"
            }
        },
        upDown: {
            // 上下屏时的样式
            parent: {
                display: "flex",
                flexWrap: "wrap",
                justifyContent: "space-around"
            },
            firstDom: {
                width: "100%",
                height: "49.9%"
            },
            secondDom: {
                width: "100%",
                height: "49.9%"
            }
        },
        four: {
            // 四屏时的样式
            parent: {
                display: "flex",
                flexWrap: "wrap",
                justifyContent: "space-around"
            },
            firstDom: {
                width: "49.9%",
                height: "49.9%"
            },
            secondDom: {
                width: "49.9%",
                height: "49.9%"
            },
            thirdlyDom: {
                width: "49.9%",
                height: "49.9%"
            },
            fourthDom: {
                width: "49.9%",
                height: "49.9%"
            }
        },
        original: { // 原始样式，用于还原
            parent: {
                ...viewer.container.parentNode.style
            },
            firstDom: {
                ...viewer.container.style
            }
        }
    }, styleOption)
    this.synchronization = BQGIS_initSynchronization({
        viewers: [{
            viewer
        }],
        viewer
    })
    this.dom = {
        firstDom: viewer.container
    }
}

/**
 * 设置屏幕类型
 * @param    mode            类型（leftRight、upDown、four）
 * @param    isLoadLayer     新增的屏是否加载主屏的图层数据(true/false)
 */
BQGIS_multiSence.prototype.setMultiSence = function (mode, isLoadLayer) {
    this.mode = mode

    if (mode === 'leftRight' || mode === 'upDown') {
        if (this.dom.thirdlyDom) {
            this.synchronization.destroyViewerById('thirdlyDom')
            this.dom.thirdlyDom = null
        }
        if (this.dom.fourthDom) {
            this.synchronization.destroyViewerById('fourthDom')
            this.dom.fourthDom = null
        }
    }

    if (mode === 'leftRight') {
        Object.assign(this.viewer.container.parentNode.style, this.styleOption.leftRight.parent)
        this.setDom('firstDom', this.styleOption.leftRight.firstDom, isLoadLayer)
        this.setDom('secondDom', this.styleOption.leftRight.secondDom, isLoadLayer)
    }
    if (mode === 'upDown') {
        Object.assign(this.viewer.container.parentNode.style, this.styleOption.upDown.parent)
        this.setDom('firstDom', this.styleOption.upDown.firstDom, isLoadLayer)
        this.setDom('secondDom', this.styleOption.upDown.firstDom, isLoadLayer)
    }
    if (mode === 'four') {
        Object.assign(this.viewer.container.parentNode.style, this.styleOption.four.parent)
        this.setDom('firstDom', this.styleOption.four.firstDom, isLoadLayer)
        this.setDom('secondDom', this.styleOption.four.secondDom, isLoadLayer)
        this.setDom('thirdlyDom', this.styleOption.four.thirdlyDom, isLoadLayer)
        this.setDom('fourthDom', this.styleOption.four.fourthDom, isLoadLayer)
    }
    return this.getViewData()
}

BQGIS_multiSence.prototype.setDom = function (id, style, isLoadLayer) {
    if (this.dom[id]) {
        Object.assign(this.dom[id].style, style)
    } else {
        const viewerOption = this.viewer.getCurrentOptions()
        if (!isLoadLayer) {
            viewerOption.basemaps = []
            viewerOption.layers = []
            viewerOption.terrain = new Cesium.EllipsoidTerrainProvider({})
        }
        const data = this.synchronization.addViewerById(id, this.viewer.container.parentNode, style, viewerOption)
        this.dom[id] = data.viewer.container
    }
}

BQGIS_multiSence.prototype.getViewData = function () {
    if (this.mode === "leftRight" || this.mode === "upDown") {
        const first = this.synchronization.getViewDataById(this.dom.firstDom.id)
        const second = this.synchronization.getViewDataById(this.dom.secondDom.id)
        return [first, second]
    } else if (this.mode === 'four') {
        const first = this.synchronization.getViewDataById(this.dom.firstDom.id)
        const second = this.synchronization.getViewDataById(this.dom.secondDom.id)
        const thirdly = this.synchronization.getViewDataById(this.dom.thirdlyDom.id)
        const fourth = this.synchronization.getViewDataById(this.dom.fourthDom.id)
        return [first, second, thirdly, fourth]
    } else {
        return [this.synchronization.getViewDataById(this.dom.firstDom.id)]
    }
}

BQGIS_multiSence.prototype.getViewDataById = function (id) {
    return this.synchronization.getViewDataById(id)
}

BQGIS_multiSence.prototype.reset = function (viewerStyle, parentStyle) {
    if (this.dom.secondDom) {
        this.synchronization.destroyViewerById('secondDom')
        this.dom.secondDom = null
    }
    if (this.dom.thirdlyDom) {
        this.synchronization.destroyViewerById('thirdlyDom')
        this.dom.thirdlyDom = null
    }
    if (this.dom.fourthDom) {
        this.synchronization.destroyViewerById('fourthDom')
        this.dom.fourthDom = null
    }
    this.mode = null
    Object.assign(this.viewer.container.style, viewerStyle || this.styleOption.original.firstDom)
    Object.assign(this.viewer.container.parentNode.style, parentStyle || this.styleOption.original.parent)
    return this.getViewData()
}

BQGIS_multiSence.prototype.setStateById = function (id, state) {
    this.synchronization.setStateById(id, state)
    return this.getViewData()
}